<template>
	<div class="login">
		<div class="login-banner">
			<p>登录后你可以：</p>
			<div class="banner-box"><BannerLoop :banner="banner"/></div>
			<div class="login-btns">
				<router-link to="/reg" class="reg">注册</router-link>
				<router-link to="/login" class="login-btn">登录</router-link>
			</div>
		</div>
		<div class="language">
			<div class="box hovering">
				<div class="text">
					<span class="biger"><Icon type="language"/></span>
					<span class="lang">语言：{{list[index].text}}</span>
				</div>
				<span class="right"><Icon type="arrowRight"/></span>
				<ul class="list">
					<li class="item hovering" v-for="item in list" :key="item.id" :class="{active: index+1==item.id}" @click="index=item.id-1">
						<div>{{item.text}}</div>
						<span v-show="item.id == index+1"><Icon type="yes"/></span>
					</li>
				</ul>
			</div>
		</div>
		<span class="triangle"><Icon type="arrowUp"/></span>
	</div>
</template>
<script>
import BannerLoop from '@/components/Public/BannerLoop'

export default{
	data(){
		return{
			banner: [{
				id: 1,
				img: 'https://static.hdslb.com/images/danmu.png'
			}],
			list: [{
				id: 1,
				text: '简体中文'
			},{
				id: 2,
				text: '繁体中文'
			}],
			index: 0
		}
	},
	components:{
		BannerLoop
	}
}
</script>

<style scoped lang="less">
.login{
	width: 360px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 6px;
	background-color: #fff;
	border-radius: 4px;
	.login-banner{
		width: 100%;
		padding: 16px 20px 12px 20px;
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid #F4F4F4;
		box-sizing: border-box;
		p{
			font-size: 14px;
			color: #212121;
			margin-bottom: 15px;
		}
		.banner-box{
			position: relative;
			width: 320px;
			height: 200px;
			overflow: hidden;
			background: url(https://static.hdslb.com/images/base/danmu.png) no-repeat center;
		}
		.login-btns{
			display: flex;
			justify-content: space-between;
			margin-top: 16px;
			a{
				display: inline-block;
				width: 48%;
				height: 38px;
				line-height: 38px;
				text-align: center;
				border-radius: 2px;
				font-size: 14px;
				transition: 0.3s ease;
				border: 1px solid #00A1D6;
				cursor: pointer;
			}
			.reg{
				background-color: #fff;
				color: #00A1D6;
			}
			.login-btn{
				background-color: #00A1D6;
				color: #FFFFFF;
			}
		}
	}
	.language{
		width: 100%;
		border-bottom: 1px solid #F4F4F4;
		padding: 7px 0;
		position: relative;
		font-size: 14px;
		color: #979797;
		.box{
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			transition: 0.3s ease;
			padding: 8px 23px;
			cursor: pointer;
			&:hover{
				.list{
					display: block;
				}
			}
			.text{
				display: flex;
				font-size: 16px;
				.lang{
					margin-left: 5px;
					color: #212121;
				}
			}
			.list{
				position: absolute;
				left: -240px;
				top: -7px;
				padding: 8px 0;
				display: none;
				width: 240px;
				font-size: 12px;
				background: #fff;
				color: #212121;
				box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
				transition: 0.3s ease;
				border-radius: 2px;
				background-color: #fff;
				.item{
					padding: 8px 15px;
					line-height: 22px;
					display: flex;
					justify-content: space-between;
					cursor: pointer;
					transition: all 0.3s;
					div{
						font-size: 14px;
					}
					span{
						font-size: 14px;
					}
				}
				.active{
					color: var(--cblue);
				}
			}
		}
		.right{
			font-size: 18px;
		}
	}
	.triangle{
		left: 180px;
	}
}
</style>
